<template>
  <div class="shopinfoContainer">
    <mt-swipe :auto="4000">
      <mt-swipe-item>
        <img src="../../../img/vae.jpg" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../../../img/vae3.jpg" alt />
      </mt-swipe-item>
    </mt-swipe>
    <h3>
      寻宝游戏
      <small>专辑特卖</small>
    </h3>
    <div class="pirce">
      <span class="now">￥4490.00</span>
      <span class="old">￥6690.00</span>
    </div>
    <p>这是一段描述文字</p>
    <h5>加入购物车</h5>
    <div class="mui-numbox" data-numbox-min="1" data-numbox-max="9">
      <button class="jian mui-btn mui-btn-numbox-minus" type="button">-</button>
      <input id="test" class="mui-input-numbox" type="number" :value="this.$store.state.cont" />
      <button class="jia mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
    <transition @before-enter="before" @enter="enter" @after-enter="leave">
      <div class="buld" id="buld" v-show="flag"></div>
    </transition>
    <mt-button @click="add">加入购物车</mt-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false
    };
  },
  methods: {
    before(el) {
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetHeight;
      //小球的位置
      var buld = document.getElementById("buld").getBoundingClientRect();
      //徽章的位置
      var hz = document.getElementById("hz").getBoundingClientRect();
      console.log(buld);
      console.log(hz);
      //获取徽章的位置
      var xDit = hz.left;
      var yDit = hz.top;
      el.style.transform = `translate(${xDit}px,${yDit}px)`;
      el.style.transition = "all 1s cubic-bezier(.49,.77,.91,.06)";
  
      done();
    },
    leave() {
      this.flag = !this.flag;

    },
    add(){
      this.flag = !this.flag;
      var rat = {name:"zs",count:this.$store.state.cont}
      localStorage.setItem("zs",JSON.stringify(rat) ||"");
      this.$store.commit("meta",JSON.parse(localStorage.getItem("zs")).count)
    }
  }
};
</script>
<style lang="scss" scoped>
.mint-swipe {
  overflow: hidden;
  position: relative;
  height: 200px;
}
.mui-numbox {
  margin-left: 20%;
}
.buld {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  position: absolute;
  top: 345px;
  left: 131px;
  z-index: 555;
}
.shopinfoContainer {
  padding: 6px;
  h3 {
    text-align: center;
    font-size: 17px;
    small {
      font-size: 15px;
    }
  }
  .pirce {
    .now {
      color: red;
      font-size: 15px;
      font-weight: bold;
    }
    .old {
      color: #999;
      text-decoration: line-through;
      padding-left: 60px;
    }
  }
  p {
    font-size: 15px;
  }
  h5 {
    font-size: 16px;
  }
}
</style>